<script setup lang="ts">
import { imagePath } from '@/libs/file-utils'
import { showSigninMask, close } from './data'
import { showGuideQuizMask } from '../guide-quiz-mask/data'

const signin_bg = imagePath('main/home/signin-bg.png')
</script>

<template>
  <MaskWrapper
    :show="!showGuideQuizMask && showSigninMask"
    @update:show="showSigninMask = false"
  >
    <div
      class="signin"
      :style="{ backgroundImage: signin_bg }"
    >
      <div
        class="nav-area"
        @click="close(true)"
      ></div>
      <div
        class="close-area"
        @click="close(false)"
      ></div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.signin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 620rpx;
  height: 822rpx;

  .nav-area {
    position: absolute;
    bottom: 110rpx;
    left: 50%;
    transform: translateX(-50%);

    width: 300rpx;
    height: 100rpx;
  }

  .close-area {
    position: absolute;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);

    width: 80rpx;
    height: 80rpx;
  }
}
</style>